<template>
	<view class="container">
		<!-- F1:用户名输入框组 -->
		<view class="input-group">
			<input class="input" placeholder="用户名/邮箱/手机号" v-model="uname" :focus="focusedInput==='uname'">
			<uni-icons type="person-filled" size="24" color="#666"></uni-icons>
		</view>
		<!-- F2:密码输入框组 -->
		<view class="input-group">
			<!-- 注意:小程序/uni-app中的input的type没有password选项 -->
			<input class="input" placeholder="登录密码" type="safe-password" :password="hidePwd" v-model="upwd"
				:focus="focusedInput==='upwd'">
			<uni-icons :type="hidePwd?'eye-slash-filled':'eye-filled'" size="24" color="#666" @click="hidepwd">
			</uni-icons>
			<text class="separator">|</text>
			<navigator url="/pages/findpwd/findpwd">找回密码</navigator>
		</view>
		<!-- F3:登录按钮 -->
		<button class="btn" type="primary" @click="doLogin">登 录</button>
		<!-- F4:跳转去注册 -->
		<!-- 注意:"注册"不是page,而是component,所有不能使用navigtor -->
		<text class="jumpToComponent" @click="$emit('showChild',{childName:'register'})">还没账号?现在去注册</text>

		<!-- F5:其他登录方式 -->
		<view class="">
			<uni-icons type="qq" size="30" color="#3399dd"></uni-icons>
			<uni-icons type="weixin" size="30" color="#2dae13"></uni-icons>
			<uni-icons type="weibo" size="30" color="#e52227"></uni-icons>
		</view>
	</view>
</template>

<script>
	import {
		userLogin
	} from '../../service';
	export default {
		name: "xzUserLogin",
		data() {
			return {
				hidePwd: true,
				uname: 'yaya',
				upwd: '123456',
				focusedInput: 'uname', //当前获得输入焦点的元素名
				//focusedInput:'upwd',  //当前获得输入焦点的元素名
			};
		},
		methods: {
			async doLogin() {
				//先将用户输入的登录名的密码,并验证
				this.focusedInput = ''
				//登录需要的用户名和密码
				let uname = this.uname.trim()
				let upwd = this.upwd.trim()
				if (!uname) {
					uni.showToast({
						icon: 'error',
						title: '用户名不能为空',
						duration: 3000
					})
					//让"用户名"输入框获得焦点
					this.$nextTick(() => {
						this.focusedInput = 'uname'
					})
					return
				}
				if (!upwd) {
					uni.showToast({
						icon: 'error',
						title: '密码不能为空',
						duration: 3000
					})
					//让"用户名"输入框获得焦点
					this.$nextTick(() => {
						this.focusedInput = 'upwd'
					})
					return
				}
				//调用登录接口
				let {
					code,
					msg,
					token
				} = await userLogin({
					uname,
					upwd
				})
				if (code === 200) {
					//在客户端存储服务器返回的"令牌" -- 当前客户端的身份信息
					uni.setStorageSync('userToken', token)
					//弹出一个土司对话框
					uni.showToast({
						icon: 'loading',
						title: '欢迎回来:' + uname,
						duration: 3000
					})
					//判断客户端是否存在"登录原因页"
					let loginReason = uni.getStorageSync('loginReason')
					if (loginReason) {
						//清除客户端保存的登录原因页
						uni.removeStorageSync('loginReason')
						//跳转到登录原因页
						uni.navigateTo({
							url:loginReason
						})
					} else {
						//跳转
						this.$emit('showChild', {
							childName: 'profile'
						})
					}
				} else {
					uni.showModal({
						title: '错误',
						content: '登录失败! 服务器返回消息:' + msg,
						showCancel: false,
						confirmColor: '#0aa1ed',
						confirmText: '好的',
					})
				}



			},
			hidepwd() {
				this.hidePwd = !this.hidePwd
			}
		},
		//生命周期方法 -- 组件(不是页面)挂载时
		mounted() {
			uni.setNavigationBarTitle({
				title: '用户登录'
			})
		}
	}
</script>

<style lang="scss">
	.container {
		position: absolute;
		width: 100%;
		padding: $uni-spacing-col-lg*2 $uni-spacing-row-lg*2;

		.input-group {
			//弹性容器主轴方向:横向
			flex-direction: row;
			//子元素在交叉轴上居中对齐
			align-items: center;
			//下边框
			border-bottom: $uni-border-width $uni-border-style $uni-border-color;
			padding: $uni-spacing-row-sm $uni-spacing-row-sm;
			margin-top: $uni-spacing-col-lg;

			.input {
				flex: 1;
			}

			.separator {
				margin: 0 $uni-spacing-col-base;
			}
		}

		.btn {
			width: 100%;
			margin-top: $uni-spacing-col-lg*2;
			background-color: $uni-color-primary;
			border-radius: $uni-border-radius-lg*5;
		}

		.jumpToComponent {
			margin-top: $uni-spacing-col-lg*3;

			&:active {
				opacity: $uni-opacity-half;
			}
		}
	}
</style>
